<template>
  <div>
    <el-descriptions>
      <el-descriptions-item :label='$t("区域")'>{{queryList.shopName}}</el-descriptions-item>
      <el-descriptions-item :label='$t("时间范围")'>{{queryList.startTime}}/{{queryList.endTime}}</el-descriptions-item>
    </el-descriptions>
    <el-card>
      <el-descriptions class="margin-top" v-model="this.totalData" :title='$t("概况")' direction="vertical" :column="12"
        border>
        <el-descriptions-item :label='$t("发放数量")'>{{totalData.total}}</el-descriptions-item>
        <el-descriptions-item :label='$t("已领取（占比）")'>{{totalData.recieveNum}}</el-descriptions-item>
        <el-descriptions-item :label='$t("剩余（占比）")'>{{totalData.surplusNum}}</el-descriptions-item>
        <el-descriptions-item :label='$t("已使用（占比）")'> {{totalData.usedNum}}</el-descriptions-item>
        <el-descriptions-item :label='$t("已过期（占比）")'>{{totalData.expiredNum}}</el-descriptions-item>
        <el-descriptions-item :label='$t("使用优惠券订单总额")'>{{totalData.totalOrderPrice}}</el-descriptions-item>
        <el-descriptions-item :label='$t("总优惠金额")'>{{totalData.totalCouponPrice}}</el-descriptions-item>

      </el-descriptions>
    </el-card>

    <el-card>
      <el-table :data="orderList" :element-loading-text="$t('Searching')" border fit highlight-current-row>

        <el-table-column align="center" :label="$t('订单编号')" prop="orderSn">
        </el-table-column>
        <el-table-column align="center" :label="$t('门店名称')" prop="shopName"/>
        <el-table-column align="center" :label="$t('商品')" prop="goodsNames">
          <template slot-scope="scope">
            <el-row v-for="goods in scope.row.goods">
              {{goods.goodsName}}
            </el-row>
          </template>
        </el-table-column>
        <!--订单类型(1:自提；2：外送;3:堂食；4：邮寄)-->
        <el-table-column align="center" :label="$t('价值')" prop="actualPrice">
          <template slot-scope="scope">
            {{scope.row.actualPrice}}$
          </template>
        </el-table-column>

        <el-table-column align="center" :label="$t('订单时间')" prop="payTime">
        </el-table-column>

        <el-table-column align="center" :label="$t('配送方式')" prop="transportType">
          <template slot-scope="scope">
            {{filterTransportType(scope.row.transportType)}}
          </template>
        </el-table-column>

        <el-table-column align="center" :label="$t('配送/取货时间')" prop="receiptRange">
        </el-table-column>

        <el-table-column align="center" :label="$t('用户名称')" prop="userName">
        </el-table-column>

        <el-table-column align="center" :label="$t('状态')" prop="shipStatus">
          <template slot-scope="scope">
            {{filterShipStatus(scope.row.transportType)}}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('Operate')" width="400" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <!-- 详情 -->
            <el-button v-permission="['GET /admin/p/coupon_statistic_detail_detail']" type="primary" plain1 size="mini"
              @click="handleDetail(scope.row)">{{$t('Details')}}</el-button>
          </template>
        </el-table-column>
      </el-table>


      <pagination v-show="total>0" :total="total" :page.sync="queryList.page" :limit.sync="queryList.limit"
        @pagination="getList" />
    </el-card>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import ElSelectDropdown from 'element-ui/packages/select/src/select-dropdown'
import BackToTop from '@/components/BackToTop'
import { queryOrderInCoupon } from '../../api/coupon'

export default {
  name: 'couponTypeStatisticDetail',
  components: { ElSelectDropdown, BackToTop, Pagination },
  data() {
    return {
      total: 0,
      queryList: {
        startTime: '',
        endTime: '',
        regionId: 1,
        id: 1,
        name: '',
        page: 1,
        limit: 20,
      },
      totalData: {
        total: undefined,
        recieveNum: undefined,
        usedNum: undefined,
        surplusNum: undefined,
        expiredNum: undefined,
        totalOrderPrice: undefined,
        totalCouponPrice: undefined,
      },
      orderList: []
    }
  },
  methods: {
    init() {
      try {
        this.totalData = this.$route.query.totalData
        this.queryList.endTime = this.$route.query.endTime
        this.queryList.startTime = this.$route.query.startTime
        this.queryList.shopId = this.$route.query.shopId
        this.queryList.shopName = this.$route.query.shopName
        //通过id查询对应的订单数据
        this.getList()
      }
      catch (e) {
      }

    },
    getList() {
      queryOrderInCoupon({ "couponId": this.totalData.couponId }).then(response => {
        this.orderList = response.data.data.list;
        this.total = response.data.data.total
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },
    handleDetail(row) {
      this.$router.push({ path: '/order/detail', query: { id: row.id } });
    },
    filterTransportType(transportType) {
      if (transportType == 1) {
        return this.$t('自取')
      } else if (transportType == 2) {
        return this.$t('门店配送')
      } else {
        return this.$t('物流')
      }
    },
    filterShipStatus(shipStatus) {
      if (shipStatus == 1) {
        return this.$t('未发货')
      } else {
        return this.$t('已发货')
      }
    },
  },
  created() {
    this.init()
  }
}
</script>

<style scoped>

</style>
